<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=UTF-8");
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
%>
<html>
<head>
	<meta charset="utf-8" />
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=0;"/>
		<title>租车接龙</title>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="<%=path%>/css/bootstrap.css" />
		<link rel="stylesheet" href="<%=path%>/css/validationEngine.jquery.css" />
		<link rel="stylesheet" href="<%=path%>/css/reset.css" />
		<link rel="stylesheet" href="<%=path%>/css/public.css" />
		<link rel="stylesheet" href="<%=path%>/css/quiz.css" />
		<link rel="stylesheet" href="<%=path%>/css/default.css" />
		<link rel="stylesheet" href="<%=path%>/css/fileinput.css" />
		<link rel="stylesheet" href="<%=path%>/js/pop.css" />
		<style type="text/css">
            .demo{width:100%;}
            .demo span{display:inline-block;width:100%;}
            .demo input{padding:3px;width:100%;font-family:Arial, Helvetica, sans-serif;border:1px solid #ddd;}
            .container form{margin-top: 25px;}
            .red {color: red;}
            
             
        </style>
</head>
<body>
	<div class="container">

			<form action="<%=path%>/relay/addRelay" id="report-form" method="post">
                <div class="form-group">
					<label for="">用户昵称：</label>
					<input type="text" class="form-control validate[required]" data-prompt-position="inline"  name="sponsor" placeholder="默认显示微信昵称，可修改">
				</div>
                
			    <div class="form-group">
			    <input type="hidden" value="${opid }" name="sponsorOpenid"/>
	               <!-- <label>发起时间：</label>
	               <input type="text" value="" id="created" class="timer form-control" name="created" onclick="SelectDate(this,'yyyy-MM-dd hh:mm:ss')"/> -->
                </div>

                <div class="form-group">
					<label for="area"><span class="red">*</span>&nbsp; 车辆位置：</label>
					<input type="text" class="form-control validate[required]" data-prompt-position="inline" id="area" name="relayAddress" placeholder="">
					<br>
					<button type="button" id="butta" class="btn btn-info ">定位所在地</button>
				</div>
                
                <p>请输入车辆信息，选填其中一项或全部</p>
				<div class="form-group">
					<label for="plateplate">车牌号：</label>
					<input type="text" class="form-control validate[groupRequired[trip]]" data-prompt-position="inline" id="plate" name="carNo" placeholder="">
				</div>

				<div class="form-group">
					<label for="vehicle">车辆编号：</label>
					<input type="text" class="form-control validate[groupRequired[trip]]" data-prompt-position="inline" id="vehicle" name="carCode" placeholder="">
				</div>
				
                <p>请输入会员注册信息，选填其中一项或全部</p>
				<div class="form-group">
					<label for="mobile">注册手机号：</label>
					<input type="text" class="form-control validate[required,custom[phone]]" data-prompt-position="inline" id="mobile" name="sponsorNum" placeholder="">
				</div>
				<!-- 
                <div class="form-group">
					<label for="email">注册邮箱：</label>
					<input type="text" class="form-control"  placeholder="">
				</div> -->
				
				<span class="red">*号为必填项</span>
					<input id="uploadfileimg1" value='' type='hidden' name='uploadfileimg1'>	
					<input id="uploadfileimg2" value='' type='hidden' name='uploadfileimg2'>	
					<input id="uploadfileimg3" value='' type='hidden' name='uploadfileimg3'>	
					<input id="uploadfileimg4" value='' type='hidden' name='uploadfileimg4'>	
					<input id="uploadfileimg5" value='' type='hidden' name='uploadfileimg5'>
					<div style="margin-bottom: 120px;">
						
						<div style="position: relative;">
							<a href="#" class="a-upload" id="im1">
								<input id="file_upload1" type="file" name="photo1" class="validate[groupRequired[pic]]"/>
								<div class="image_container">
									<img id="preview1" >
								</div>
								<div class="words wordtwo"><p >点击</p><p>上传</p></div>
							</a>
							<div style="position: absolute; width:20%; top:0;">
								<div class="del-list" id='del-list1'>
									<span class="bg"><span class="fa fa-trash" aria-hidden="true"></span>
									<span style="padding:0 4px;">删除</span></span>
								</div>
							</div>
						</div>	    
											

						<div style="position: relative;">	
	
							<a href="#" class="a-upload" id="im2">
								<input id="file_upload2" type="file" name="photo2" class="validate[groupRequired[pic]]" /> 
								<div class="image_container">
									<img id="preview2" >
								</div>
								<div class="words wordtwo"><p >点击</p><p>上传</p></div>
							</a>
							<div style="position: absolute; width:20%; top:0;left:20%">
								<div class="del-list" id='del-list2'>
									<span class="bg">
										<span class="fa fa-trash" aria-hidden="true"></span>
										<span style="padding:0 4px;">删除</span>
									</span>
								</div>
							</div>
						</div>
	
						<div style="position: relative;">	
	
							<a href="#" class="a-upload" id="im3">
	
								<input id="file_upload3" type="file"  name="photo3" class="validate[groupRequired[pic]]" /> 
								<div class="image_container">
								    <img id="preview3" >
								</div>
								<div class="words wordtwo"><p >点击</p><p>上传</p></div>
							</a>
							<div style="position: absolute; width:20%; top:0;left:40%">
								<div class="del-list" id='del-list3'>
									<span class="bg">
										<span class="fa fa-trash" aria-hidden="true"></span>
										<span style="padding:0 4px;">删除</span>
									</span>
								</div>
							</div>
						</div>
	
						<div style="display: none;" class="bigpic">
							<div style="position: fixed;background: #000; z-index: 999; width:100%; height:100%; top:0; left:0; text-align: center; display: table;">
							    <span style=" display:table-cell;vertical-align:middle;">
							    	<img src="" alt="" style="width:100%;" class="big-img"/>
							    </span>
							</div>
						</div>
                    
                   
					</div>	
				<div class="form-group">
					<img  id="ssw" alt="" src="">
					<button type="button" class="btn btn-info width100" id="Picker" onclick="wx.chooseImage();">选择测试</button>
					<br/>
				</div>
				<div class="form-group">
					<button type="button" class="btn btn-info width100" id="PickerUp" onclick="wx.uploadImage();">上传测试</button>
					
				</div>
				<div class="form-group">
					<button type="button" class="btn btn-info width100" id="filePicker" >上传批量测试</button>
				</div>
				<div class="submit-btn">
					<button type="submit" class="btn btn-info width100" id="submit-btn" onclick="sub();">开始接龙</button>
				</div>

			</form>
		</div>
		
		 <div class="row">
			<div class="col-xs-10 col-xs-offset-1 text-center"  id='tsk' >			
			</div>
		</div>
		<script src="<%=path%>/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
		<script type="text/javascript" src="<%=path%>/js/jquery-1.9.1.min.js" ></script>
		<script type="text/javascript" src="<%=path%>/js/adddate.js" ></script>
		<script type="text/javascript" src="<%=path%>/js/fileinput.js" ></script>
		<script type="text/javascript" src="<%=path%>/js/xyPop.js"></script>
		<script type="text/javascript" src="<%=path%>/js/fileinput_locale_zh.js" ></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F9f0bdc1f02411bc3d439410a5795937"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=F9f0bdc1f02411bc3d439410a5795937&v=1.0"></script>
		<script type="text/javascript" src="<%=path%>/js/pic.js" ></script>
		<script type="text/javascript"	src="<%=path%>/js/jquery.validationEngine.js"></script>
		<script type="text/javascript"	src="<%=path%>/js/jquery.validationEngine-zh_CN.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3bfgEgWmuChfsDeVNLe3iWlrXMsGIdH9"></script>
		<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
		<script type="text/javascript">


			var area = '';
			var geolocation = new BMap.Geolocation();
			var geoc = new BMap.Geocoder();
			//根据浏览器获取地里位置
				geolocation.getCurrentPosition(function(r){
					if (this.getStatus() == BMAP_STATUS_SUCCESS) {
			//解析地理位置		
						
						var pt =  new BMap.Point(r.point.lng,r.point.lat);
						geoc.getLocation(pt,function(rs){											
							var addComp = rs.addressComponents;
							area = addComp.province  + addComp.city + addComp.district +addComp.street + addComp.streetNumber;
						})
					}
				})

				
					$("#butta").click(function(){
						
						(area) ?$("#area").val(area):$("#area").val("没有获取到相关地理信息");

					})


		</script>
		<script type="text/javascript">	
		 $(document).ready(function(){
			 $("#report-form").validationEngine();
		 	Date.prototype.pattern=function(fmt) {           
                var o = {           
                    "M+" : this.getMonth()+1, //月份           
                    "d+" : this.getDate(), //日           
                    "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时           
                    "H+" : this.getHours(), //小时           
                    "m+" : this.getMinutes(), //分           
                    "s+" : this.getSeconds(), //秒           
                    "q+" : Math.floor((this.getMonth()+3)/3), //季度           
                    "S" : this.getMilliseconds() //毫秒           
                };           
                var week = {           
                    "0" : "/u65e5",           
                    "1" : "/u4e00",           
                    "2" : "/u4e8c",           
                    "3" : "/u4e09",           
                    "4" : "/u56db",           
                    "5" : "/u4e94",           
                    "6" : "/u516d"          
                };           
                if(/(y+)/.test(fmt)){           
                    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));           
                }           
                if(/(E+)/.test(fmt)){           
                    fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);           
                }           
                for(var k in o){           
                    if(new RegExp("("+ k +")").test(fmt)){           
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));           
                    }           
                }           
                return fmt;           
            }         
            var t = new Date(); 
             var x = t.pattern("yyyy-MM-dd hh:mm:ss")            
            $(".timer").attr('placeholder',x);
             
             
		});
		 function sub() {
				
				$("#report-form").submit();
	
		}
        
		</script>
		<!-- <script type="text/javascript">
			// 百度地图API功能
			var map = new BMap.Map("allmap");
			var point = new BMap.Point(116.331398,39.897445);
			map.centerAndZoom(point,12);
			var geoc = new BMap.Geocoder();    
		
			map.addEventListener("click", function(e){        
				var pt = e.point;
				geoc.getLocation(pt, function(rs){
					var addComp = rs.addressComponents;
					alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
				});        
			});
		</script> -->
		
		<script type="text/javascript">
		//微信jssdk config
		wx.config({
			debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId : '${appid}', // 必填，公众号的唯一标识
			timestamp : '${timestamp}', // 必填，生成签名的时间戳
			nonceStr : '${noncestr}', // 必填，生成签名的随机串
			signature : '${signature}',// 必填，签名，见附录1
			jsApiList : [ 'checkJsApi', //判断当前客户端版本是否支持指定JS接口
			'onMenuShareTimeline', //分享给好友
			'onMenuShareAppMessage', //分享到朋友圈
			'onMenuShareQQ', //分享到QQ
			'onMenuShareWeibo',//分享到微博
			'chooseImage',
			'uploadImage',
			'getLocation'
			]
		// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});
		wx.ready(function() { //ready函数用于调用API，如果你的网页在加载后就需要自定义分享和回调功能，需要在此调用分享函数。//如果是微信游戏结束后，需要点击按钮触发得到分值后分享，这里就不需要调用API了，可以在按钮上绑定事件直接调用。因此，微信游戏由于大多需要用户先触发获取分值，此处请不要填写如下所示的分享API
					wx.onMenuShareTimeline({ //分享到朋友圈的API  
								title : '接招！car2go接力go', // 分享标题
								link : 'http://run.xuanzhen-tech.com/car2go_wx/core/toRight.html', // 分享链接
								imgUrl : 'http://run.xuanzhen-tech.com/car2go_wx/img/titlex.png', // 分享图标
								success : function() {
									// 用户确认分享后执行的回调函数
								},
								cancel : function() {
									// 用户取消分享后执行的回调函数
								}
							});
					wx.onMenuShareAppMessage({//分享到朋友 
								title : '接招！car2go接力go', // 分享标题
								desc : 'car2go接力go', // 分享描述
								link : 'http://run.xuanzhen-tech.com/car2go_wx/core/toRight.html', // 分享链接
								imgUrl : 'http://run.xuanzhen-tech.com/car2go_wx/img/titlex.png', // 分享图标
								type : 'link', // 分享类型,music、video或link，不填默认为link
								dataUrl : '', // 如果type是music或video，则要提供数据链接，默认为空
								success : function() {
									// 用户确认分享后执行的回调函数
								},
								cancel : function() {
									// 用户取消分享后执行的回调函数
								}
							});
					wx.chooseImage({
						  count: 1, // 默认9
						  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						  success: function (res) {
						    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
						    $("ssw").attr("src",localIds[0].toString());
						  }
						});
					wx.uploadImage({
						  localId: localIds[0].toString(), //images.localId[i].toString(), 需要上传的图片的本地ID，由chooseImage接口获得
						  isShowProgressTips: 1, // 默认为1，显示进度提示
						  success: function (res) {
						    var serverId = res.serverId; // 返回图片的服务器端ID
						  }
						});
					wx.getLocation({
					    type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
					    success: function (res) {
					        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
					        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
					        var speed = res.speed; // 速度，以米/每秒计
					        var accuracy = res.accuracy; // 位置精度
					        
					    	var map = new BMap.Map("allmap");
							var point = new BMap.Point(longitude,latitude);
							map.centerAndZoom(point,12);
							var geoc = new BMap.Geocoder();    
						
							map.addEventListener("click", function(e){        
								var pt = e.point;
								geoc.getLocation(pt, function(rs){
									var addComp = rs.addressComponents;
									alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
								});        
							});
					    }
					});
					$('#filePicker').on('click', function () {
						  wx.chooseImage({
						    success: function (res) {
						      var localIds = res.localIds;
						      syncUpload(localIds);
						    }
						  });
						});
						var syncUpload = function(localIds){
						  var localId = localIds.pop();
						  wx.uploadImage({
						    localId: localId,
						    isShowProgressTips: 1,
						    success: function (res) {
						      var serverId = res.serverId; // 返回图片的服务器端ID
						      //其他对serverId做处理的代码
						      if(localIds.length > 0){
						        syncUpload(localIds);
						      }
						    }
						  });
						};
				});
		</script>
</body>
</html>
<script type="text/javascript" src="/jssdk/jssdk.js"></script>
<script type="text/javascript">jssdk('爱心报案','爱心报案',"http://car2go.xuanzhen-tech.com/index.php/act/report/index",'http://car2go.xuanzhen-tech.com/Public/H5/img/fenxiang.jpg');
</script>